<template>
	
	<view class="testCenter" >
		<!-- 导航栏 -->
		<navBar :backFont="true" :title="'测试中心'" >
		</navBar>	
		<view class="test_cards_con">
			<view class="test_card">
				<view class="test_card_left">
					<image class="icon_test" src="../../static/icons/data_pen.png" mode="widthFix"></image>
					<text class="test_font">班级名单测试</text>
				</view>
				<text class="test_btn" @click="gotaskDetails">去测试</text>
			</view>
			<view class="test_card">
				<view class="test_card_left">
					<image class="icon_test" src="../../static/icons/face.png" mode="widthFix"></image>
					<text class="test_font">人脸识别测试</text>
				</view>
				<text class="test_btn_face">去测试</text>
			</view>
		</view>
		<view class="test_record_tip">
			<view ></view>
			<text class="record_mine">我的测试记录</text>
			<view class="shai_btn" @click="isShowFiltrate = true">
				<uni-icons class="bars_icon" type="bars" ></uni-icons>
				<text>筛选</text>
			</view>
		</view>
		<view class="recordList_con">
			<view class="date_condition">
				<text class="date">{{currentDate}}</text>
				<view class="pickerCon">
					<uni-datetime-picker type="date" :clear-icon="false" @change="dateChange" v-model="single_date" placeholder="选择日期并查询" />
				</view>
				<view class="current_shai_con" v-show="isShowShaiFont">
					<text class="current_shai_font">当前筛选条件：</text>
					<view class="current_shai" >
						<text class="tiaojianFont">学校：天一中学</text>
						<text class="tiaojianFont">班级：{{currentClassName}}</text>
						<text class="tiaojianFont">运动：{{currentSportsName}}</text>
					</view>
					<text class="clearAll" @click="clearAll">清楚所有筛选条件</text>
				</view>
				
			</view>
			<view class="recordList_cards_con" >
				<view class="recordList_card" v-for="(item,index) in reactive_obj.class_list">
					<view class="first_floor">
						<view class="first_floorLeft">
							<uni-icons class="classIcon" type="smallcircle" ></uni-icons>
							<text>{{item.clazzName}}</text>
						</view>
						<uni-icons class="more_icon" type="more-filled" ></uni-icons>
					</view>
					<view class="second_floor">
						<image v-if="item.sportsId == 1001" class="img_record" src="../../static/icons/long-jump2.png" mode="widthFix"></image>
						<image v-if="item.sportsId == 1002" class="img_record" src="../../static/icons/100-meter-dash.png" mode="widthFix"></image>
						<image v-if="item.sportsId == 1003" class="img_record" src="../../static/icons/pull-up.png" mode="widthFix"></image>
						<image v-if="item.sportsId == 1004" class="img_record" src="../../static/icons/sit-up.png" mode="widthFix"></image>
						<image v-if="item.sportsId == 1005" class="img_record" src="../../static/icons/jump-rope.png" mode="widthFix"></image>
						<image v-if="item.sportsId == 1006" class="img_record" src="../../static/icons/shot-put.png" mode="widthFix"></image>
						<view class="second_floor_right">
							<text class="sports">{{getSportsName(item.sportsId)}}</text>
							<view class="location">
								<uni-icons type="location-filled" ></uni-icons>
								<text>A/B</text>
							</view>
							<view class="uni-group">
								<Progress :progress="getFinishPrecent(item.clazzFinishTotal,item.clazzTotal)"></Progress>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="filtrate" v-show="isShowFiltrate">
			<text class="filtrate_font">请选择</text>
			<view class="backSelect_con">
				<text @click="backSelect" class="backSelect">返回</text>
			</view>
			<view class="select_conModel">
				<uni-data-select
					  v-show="isShowSchool"
				      v-model="filtrate_select_school"
				      :localdata="reactive_obj.select_school"
				      @change="select_school_method"
					  placeholder="筛选学校"
					  class="select_class"
				    ></uni-data-select>
				<uni-data-select
				      v-show="isShowgrade"
				      v-model="filtrate_select_grade"
				      :localdata="reactive_obj.select_grade"
				      @change="select_grade_method"
					  placeholder="筛选年级"
					  class="select_class"
				    ></uni-data-select>
				<uni-data-select
				      v-show="isShowClass"
				      v-model="filtrate_select_class"
				      :localdata="reactive_obj.select_class"
				      @change="select_class_method"
					  placeholder="筛选班级"
					  class="select_class"
				    ></uni-data-select>		
				<uni-data-select
				      v-model="filtrate_select_sports"
				      :localdata="reactive_obj.select_sports"
				      @change="select_sports_method"
					  placeholder="筛选运动"
				    ></uni-data-select>	
			</view>
			
			<view class="popup_btn_con">
				<myBtn class="popup_btn" @click="close_filtrate_method" title="取消" color="#aaa" width="15vw" height="6vh"></myBtn>
				<myBtn class="popup_btn" @click="confirm_filtrate_method" title="确定" color="#0aa1ed" width="15vw" height="6vh"></myBtn>
			</view>
		</view>
		<view v-show="isShowFiltrate" class="mask_choose">
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,reactive,onMounted } from "vue";
	import requester from "../../server/requester";
	
	import {
		onReachBottom
		  } from "@dcloudio/uni-app";
		  
	//是否允许页面滚动	  
	let isArrowScreenRoll = ref(false)	  
		  
	let reactive_obj = reactive({
		class_list:[
		]as any[],//班级列表
		select_school:[{
			value:1,
			text:"天一中学"
		}] as any[],
		select_grade:[] as any[],//年级选择框数据
		select_class:[] as any[],//班级选择框数据
		select_sports:[
			{
				value:"1001",
				text:'立定跳远'
			},
			{
				value:"1002",
				text:'100米'
			},
			{
				value:"1003",
				text:'引体向上'
			},
			{
				value:"1004",
				text:'仰卧起坐'
			},
			{
				value:"1005",
				text:'跳绳'
			},
			{
				value:"1006",
				text:'实心球'
			},
			] as any[],//运动选择框数据
	})
	let userToken:any
	let sportsIdList = ["1001","1002","1003","1004","1005","1006"]
	
	let weekArrayList = [ '星期日',   '星期一',   '星期二',   '星期三',   '星期四',   '星期五',   '星期六',  ]

	onMounted(()=>{
			try {
				userToken = uni.getStorageSync('user_token');
				console.log("userToken====>>>",userToken);
				if (userToken == "") {
					uni.navigateTo({
						url:'/pages/login/login',
					})
				}
				let new_data = new Date()
				let day:any = new_data.getDay()
				let year:any = new_data.getFullYear()
				let mouth:any = new_data.getMonth() + 1 
				let dattttt:any = new_data.getDate()
				if(mouth<10){
					mouth = "0" + mouth.toString()
				}
				if(dattttt<10){
					dattttt = "0" + dattttt.toString()
				}
				let  date = year + "-" + mouth +  "-" + dattttt
				
				let week = weekArrayList [day] 
				
				currentDate.value = date + "  " + week
				// currentPageIndex = 1
				// sportsIdList.forEach(async (v:any)=>{
				// 	let newList = await	getSportBatch(v,date,PageSizeNum,currentPageIndex)
				// 	reactive_obj.class_list.push(...newList) 
				// 	console.log("我是总列表====>>>>",reactive_obj.class_list);
				// })
				
			} catch (e) {
				// error
				uni.navigateTo({
					url:'/pages/login/login',
				})
			}
		})
	
	//获取运动名称
	const getSportsName = (sportsID:any)=>{
		if (sportsID == "1001") {
			return "立定跳远"
		}else if (sportsID == "1002") {
			return "100米"
		}else if (sportsID == "1003") {
			return "引体向上"
		}else if (sportsID == "1004") {
			return "仰卧起坐"
		}else if (sportsID == "1005") {
			return "跳绳"
		}else if (sportsID == "1006") {
			return "实心球"
		}
	}
	//获取完成进度 
	const getFinishPrecent = (FinishTotal:any,Total:any)=>{
		if (FinishTotal == 0 ) {
			return 0
		}else{
			return (FinishTotal / Total) *100
		}
	}
	
	let currentDate = ref('')
	let loading = ref(false)

	const gotaskDetails= () => {
		uni.navigateTo({
			url:"/pages/taskDetails/taskDetails"
		})
	}
	let currentClassId :any = null
	let currentClassName:any = ref(null)
	let currentSportsId :any = null
	let currentSportsName:any = ref(null)
	const PageSizeNum = 10
	let currentPageIndex = 1
	//获取运动批次
	const getSportBatch = async (sportsId:any,date:any,pageSize:any,pageIndex:any)=>{
		let classId = ''
		console.log("当前页码",pageIndex);
		if (currentClassId != null ) {
			 classId  = currentClassId
		}
		let data = {
			sportsId,
			batchDate:date,
			classId,
			pageIdx:pageIndex,
			PageItem:pageSize
		}
		if (currentSportsId != null) {
			data.sportsId = currentSportsId
		}
		if(sportsId == "all"){
			data.sportsId = ''
		}
		let result:any = await requester({
			url:'/AiSports/SportBatch/querySportBatch',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		console.log( '运动批次====>>>', result);
		
		return result.data.sportBatchList
	}
	
	//选择日期事件
	let single_date:any = ref('')
	const dateChange = (e:any)=>{
		console.log('dateChange事件:', e);
		let index = new Date(e).getDay()
		currentDate.value =e  +"  " + weekArrayList [index]
		reactive_obj.class_list = []
		currentPageIndex = 1
		sportsIdList.forEach(async (v:any)=>{
			let newList = await	getSportBatch(v,e,PageSizeNum,currentPageIndex)
			reactive_obj.class_list.push(...newList) 
			console.log("我是总列表====>>>>",reactive_obj.class_list);
		})
	}
	
	//开启筛选模态框
	let isShowFiltrate = ref(true)
	
	//学校选择框
	let filtrate_select_school = ref('')
	//年级选择框
	let filtrate_select_grade = ref('')
	//班级选择框
	let filtrate_select_class = ref('')
	//运动选择框
	let filtrate_select_sports = ref('')
	
	let isShowSchool = ref(true)
	let isShowgrade = ref(false)
	let isShowClass = ref(false)
	
	//学校输入框变化触发
	const select_school_method = (e:any)=>{
		// console.log(e); // 1
		get_grade()
		isShowSchool.value = false
		isShowgrade.value = true
	}
	//年级输入框变化触发
	const select_grade_method = (e:any)=>{
		getClassInfo(e)
		isShowgrade.value = false
		isShowClass.value = true
	}
	//班级输入框变化触发
	const select_class_method = (e:any)=>{
		currentClassId = e
	}
	//运动输入框变化触发
	const select_sports_method = (e:any)=>{
		currentSportsId = e
	}
	const get_grade= async()=>{
		let data = {
				}
		let result:any = await requester({
			url:'/AiSports/grade/Query',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		console.log( '获取到的请求结果  年级====>>>', result);
		let list = []
		result.data.gradeList.forEach((v:any)=>{
			let obj:any = {}
			obj.value = v.id 
			obj.text = v.name
			list.push(obj)
		})
		reactive_obj.select_grade = list
	}  
	const getClassInfo = async(grade:any)=>{
		let data = {
			GradeID:grade,
			}
		let result:any = await requester({
			url:'/AiSports/Class/Query',
			method:'POST',
			data,
			headers:{
				token:userToken
			}
		})
		
		let list = []
		result.data.clazzList.forEach((v:any)=>{
			let obj:any = {}
			obj.value = v.ClassID
			obj.text = v.Name
			list.push(obj)
		})
		reactive_obj.select_class = list
		console.log( '班级====>>>', result);
	}
	//取消事件
	const	close_filtrate_method = ()=>{
		if (currentClassId == null ) {
			uni.showToast({
				title:'请先筛选要查询的测试记录班级',
				icon:"none"
			})
			return
		}else if (currentSportsId == null ) {
			uni.showToast({
				title:'请先筛选要查询的测试记录运动',
				icon:"none"
			})
			return
		}
		confirm_filtrate_method()
		isShowFiltrate.value = false
		isArrowScreenRoll.value = true
	}
	let isShowShaiFont = ref(false)
	//确定事件
	const confirm_filtrate_method = ()=>{
		console.log('我点击了');
		if (currentClassId == null ) {
			uni.showToast({
				title:'请选择要筛选的班级',
				icon:"none"
			})
			return
		}else if (currentSportsId == null ) {
			uni.showToast({
				title:'请选择要筛选的运动',
				icon:"none"
			})
			return
		}
		let date = currentDate.value.split(" ")[0]
		console.log('====>>>>',date);
		reactive_obj.class_list = []
		currentPageIndex = 1
		getSportBatch(currentSportsId,date,PageSizeNum,currentPageIndex).then((res:any)=>{
			reactive_obj.class_list.push(...res)
			console.log("我是筛选之后的列表====>>>>",reactive_obj.class_list);
			isShowFiltrate.value = false
			isArrowScreenRoll.value = true
			isShowShaiFont.value = true
		})
		let filterListClass =  reactive_obj.select_class.filter((v)=>{
			return v.value == currentClassId
		})
		console.log('currentClassId===》》》',currentClassId);
		console.log('filterListClass===》》》',reactive_obj.select_class);
		currentClassName.value = filterListClass[0].text
		let filterListSports =  reactive_obj.select_sports.filter((v)=>{
			return v.value == currentSportsId
		})
		currentSportsName.value = filterListSports[0].text
		
	}
	const clearAll = ()=>{
		currentClassId = null
		currentSportsId = null 
		isShowShaiFont.value = false 
		filtrate_select_school.value = ''
		filtrate_select_grade.value = ''
		filtrate_select_class.value = ''
		filtrate_select_sports.value = ''
		reactive_obj.class_list = []
		let new_data = new Date()
		let day:any = new_data.getDay()
		let year:any = new_data.getFullYear()
		let mouth:any = new_data.getMonth() + 1 
		let dattttt:any = new_data.getDate()
		if(mouth<10){
			mouth = "0" + mouth.toString()
		}
		if(dattttt<10){
			dattttt = "0" + dattttt.toString()
		}
		let  date = year + "-" + mouth +  "-" + dattttt
		
		let week = weekArrayList [day] 
		single_date.value = year + "-" + mouth +  "-" + dattttt
		currentDate.value = date + "  " + week
		currentPageIndex = 1
		
		
		
		
		// sportsIdList.forEach(async (v:any)=>{
		// 	let newList = await	getSportBatch(v,date,PageSizeNum,currentPageIndex)
		// 	reactive_obj.class_list.push(...newList) 
		// 	console.log("我是总列表====>>>>",reactive_obj.class_list);
		// })
		
		
		
		dataIsNone = false
		isShowFiltrate.value = true
		isArrowScreenRoll.value = false
	}
	let dataIsNone = false
	//监听触底事件
	onReachBottom(()=>{
		if(isShowFiltrate.value){
			return
		}
		if (currentSportsId == '') {
			return
		}
		if (dataIsNone) {
			uni.showToast({
				title:"没有数据了",
				icon:"none"
			})
			return
		}
		
		uni.showLoading({
			title:'正在加载数据...'
		})
		let date = currentDate.value.split(" ")[0]
		currentPageIndex++
		console.log('触底事件===>>当前页码',currentPageIndex);
		getSportBatch(currentSportsId,date,PageSizeNum,currentPageIndex).then((res:any)=>{
			if (res.length == 0) {
				uni.hideLoading()
				uni.showToast({
					title:"没有数据了",
					icon:"none"
				})
				 dataIsNone = true
				return
			}
			reactive_obj.class_list.push(...res)
			uni.hideLoading()
		})
	})
	
	const backSelect = ()=>{
		isShowSchool.value = true 
		isShowClass.value = false
		isShowgrade.value = false
		filtrate_select_class.value = ''
		filtrate_select_school.value = ''
		filtrate_select_grade.value = ''
		currentClassId = null
	}
</script>

<style>
.testCenter{
	width: 100vw;
	display: flex;
	flex-direction: column;
	margin-top: 11vh;
}
.test_cards_con{
	width: 96vw;
	margin: 0 auto;
	margin-top: 2vh;
	display: flex;
	justify-content: space-evenly;
}

.test_card{
	display: flex;
	background-color: #fff;
	border-radius: 2vw;
	width: 45%;
	height: 16vh;
	align-items: center;
	justify-content: space-between;
	padding: 0 2vw;
	box-sizing: border-box;
}
.test_card_left{
	display: flex;
	align-items: center;
}
.icon_test{
	width: 3vw;
	margin-right: 1vw;
}
.test_btn{
	width: 10vw;
	padding: 1vh 0 ;
	background-color: #0aa1ed;
	color: #f8f8f8;
	border-radius: 2vw;
	text-align: center;
}
.test_btn_face{
	width: 10vw;
	padding: 1vh 0 ;
	background-color: #1af929;
	color: #f8f8f8;
	border-radius: 2vw;
	text-align: center;
}
.test_record_tip{
	display: flex;
	margin: 5vh 0 ;
	justify-content: space-around;
	align-items: center;
}
.record_mine{
	color: #aaa;
}
.shai_btn{
		display: flex;
		width: 7vw;
		align-items: center;
		justify-content: space-around;
		border: 1px solid #0aa1ed;
		border-radius: 2vw;
		height: 5vh;
		font-size: 0.8rem;
		color: #0aa1ed !important;
	}
	.bars_icon{
		font-size: 0.8rem !important;
		color: #0aa1ed !important;
	}
	
	.recordList_con{
		width: 96vw;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
	}
	.date_condition{
		font-size: 0.9rem;
		margin: 3vh 0 ;
	}
	.recordList_cards_con{
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 5vh;
	}
	.recordList_card{
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 1vw;
		width: 30vw;
		height: 30vh;
		box-sizing: border-box;
		padding: 0 1vw;
		margin-top: 2vh;
		margin-right: 2vw;
	}
	.first_floor{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 10vh;
		flex-shrink: 0;
	}
	.first_floorLeft{
		border-bottom: 1px solid #f8f8f8;
		padding-bottom: 2vh;
	}
	.second_floor{
		display: flex;
		align-items: center;
		height: 20vh;
	}
	.img_record{
		width: 8vw;
		border-radius: 1vw;
	}
	.second_floor_right{
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-evenly;
		margin-left: 3vw;
	}
	.uni-group{
		width: 15vw;
	}
	.classIcon{
		color: #0aa1ed !important;
		font-size: 1.1rem !important;
		margin-right: 1vw;
	}
	.more_icon{
		font-size: 1.2rem !important;
	}
	
	.date_condition{
		display: flex;
		align-items: center;
	}
	.pickerCon{
		margin: 0 0 0 3vw;
		width: 20vw;
	}
	
	.filtrate{
		position: absolute;
		width: 40vw;
		height: 25vw;
		left: 50% ;
		top: 50%;
		background-color:  #f8f8f8;
		z-index: 100;
		transform: translateX(-50%) translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.mask_choose{
		    position:fixed;
		    top     : 0;
		    left    : 0;
		    bottom  : 0;
		    right   : 0;
		    background:rgba(0,0,0,.5); 
	}
	.filtrate_font{
		width: 100%;
		display: block;
		height: 5vh;
		background-color: #fff;
		text-align: center;
		padding-top: 3vh ;
	}
	.select_conModel{
		width: 80%;
		margin: 2vh 5vh 5vh 5vh;
		height: 30%;
	}
	.popup_btn_con{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 10vh ;
		background-color: #fff;
	}
	.select_class{
		margin:2vh 0 ;
	}
	.current_shai_con{
		display: flex;
		align-items: center;
		margin-left: 3vw;
		background-color: #fff;
		padding: 0 2vw ;
	}
	.current_shai{
		padding: 1vh 0 ;
		display: flex;
		align-items: center;
		margin-left: 1vw;
	}
	
	.clearAll{
		display: block;
		margin-left: 2vw;
		color: #0aa1ed;
	}
	.tiaojianFont{
		margin-left: 1vw;
	}
	.backSelect{
		/* display: block; */
		/* justify-content: flex-start; */
	}
	.backSelect_con{
		padding-top: 3vh;
		width: 80%;
		display: flex;
		justify-content: flex-start;
	}
</style>
